<template>
    <div class="flex-row flex-1">
        <div class="slide-box">
            <van-badge-group class="slide-bar" :active-key="activeKey" @change="onChange">
                <van-badge :title="item.name" v-for="(item,index) in categoryList" :key="index"/>
            </van-badge-group>
        </div>
        <section class="category-main flex-1 plr10">
            <!--<h2 class="c-title flex-row">为您推荐</h2>-->
            <!--<img class="c-bg ptb10" src="/img/icon/navsmall.jpg" alt="">-->
            <div v-for="(item,index) in childCategoryList">
                <h3 class="flex-column c-name ptb10">{{item.name}}</h3>
                <ul class="c-box flex-row">
                    <li
                        class="c-item"
                        v-for="(attr,list) in item.items"
                        :key="list"
                        @click="$router.push({name:'goods-list',query:{c3:attr.id}})"
                    >{{setString(attr.name,4)}}</li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script>
import * as types from "../../store/mutations-type";

export default {
    name: "Category",
    data() {
        return {
            activeKey: 0,
            categoryList: [],
            childCategoryList: []
        };
    },
    created() {
        this.getCategoryList();
    },
    methods: {
        //获取商品分类
        getCategoryList() {
            this.$store.dispatch(types.GET_CATEGORY_LIST).then(res => {
                console.log(res);
                if (res.code !== 0) return;
                this.categoryList = res.data;
                if (!this.categoryList.length) return;
                this.childCategoryList = this.categoryList[0].items;
            });
        },
        onChange(key) {
            this.activeKey = key;
            this.childCategoryList = this.categoryList[key].items;
            console.log(this.childCategoryList);
        }
    }
};
</script>

<style scoped lang="scss">
.slide-box {
    width: 100px;
    height: 100%;
    overflow: scroll;
}
.category-main {
    background: #fff;
    overflow: scroll;
}

.c-title {
    font-size: 14px;
    font-weight: bold;
    height: 30px;
}

.c-bg {
    height: 120px;
    width: 100%;
    border-top: 1px solid #efefef;
}

.c-name {
    font-weight: bold;
    font-size: 15px;
    color: $theme-color;
    align-items: flex-start;
}

.c-box {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.c-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    border: 1px solid #efefef;
    padding: 4px 0;
    margin-bottom: 10px;
    margin-right: 15px;
    font-size: 13px;
}
</style>